<template>
  <eagle-popup
    title="选择隐患分类"
    position="bottom"
    :popStyle="{ height: '80%' }"
    v-bind="$attrs"
    v-on="$listeners"
    ref="eaglePopup"
    @open="onOpen"
    closeable
  >
    <div class="main">
      <div
        v-for="(mainItem, index2) in data.filter((item) => item.DType == '-1')"
        :key="index2"
      >
        <div class="title">{{ mainItem.DName }}</div>
        <div class="lgdtype-bd">
          <eagle-grid :column-num="3" :border="false">
            <eagle-grid-item
              v-for="(item, index) in data.filter(
                (item) => item.DType == mainItem.DCode
              )"
              :key="index"
            >
              <div class="d-name" @click="handleclick(item, mainItem.DName)">
                {{ item.DName }}
              </div>
            </eagle-grid-item>
          </eagle-grid>
        </div>
      </div>
    </div>
  </eagle-popup>
</template>
<script>
export default {
  name: "danger-type",
  data() {
    return {
      data: [],
    };
  },
  methods: {
    onOpen() {
      if (this.data.length == 0) {
        this.getData();
      }
    },
    getData() {
      this.$axios.get("/DangerLawGist/GetDirectories", null).then((res) => {
        this.data = res.data;
      });
    },
    // 选择隐患分类
    handleclick(item, typeName) {
      item.DTypeName = typeName;
      item.DFullName = item.DTypeName+">"+item.DName;
      this.$emit("callback", item);
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  background-color: #e8f1f8;
}
.title {
  border-left: 3px solid rgb(0, 195, 224);
  padding: 10px;
}
.lgdtype-bd {
  background-color: #fff;
  padding-top:10px;
  padding-bottom: 10px;
}
.d-name {
  width: 105px;
  border: 1px solid #eee;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 5px;
  font-size: 14px;
  text-align: center;
}
</style>